@use 'design-system' as *;

.emptyWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    height: 80vh;
    justify-content: center;
    @media screen and (min-width: 800px) {
        display: none;
    }
}

.headingEmpty {
    margin-bottom: 8px;
    color: var(--color-text-secondary);
    text-align: center;
}

.iconLight {
    #{$selector-darkmode} & {
        display: none;
    }
}

.iconDark {
    display: none;

    #{$selector-darkmode} & {
        display: block;
    }
}
.paragraphyEmpty {
    text-align: center;
    line-height: 1.5;
}
.lineGrid {
    white-space: nowrap;
}

.lightImage {
    border-radius: var(--radius-lg);
    max-width: 456px;
    width: 100%;
    margin-bottom: 24px;
    border: 1px solid var(--color-border-secondary);

    #{$selector-darkmode} & {
        display: none;
    }
}

.darkImage {
    display: none;
    #{$selector-darkmode} & {
        display: block;
        border: 1px solid var(--color-border-primary);
        max-width: 500px;
        width: 100%;
        margin-bottom: 24px;
        border-radius: var(--radius-lg);
    }
}
